<layout name='Layout/layout_popup' />
<script type="text/javascript" src="__PUBLIC__/js/plupload/plupload.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/plupload/plupload.flash.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/plupload/plupload.html5.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jcrop/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/js/jcrop/jquery.Jcrop.css" type="text/css" />
<div id="uploader">	
	<input type="hidden" id="avatarUpload" value="" />
	<input type="hidden" id="img" name="img" />
	<input type="hidden" id="id" name="id" value="{$id}"/>
	<input type="hidden" id="x" name="x" />
	<input type="hidden" id="y" name="y" />
	<input type="hidden" id="w" name="w" />
	<input type="hidden" id="h" name="h" />
	<div class="ul-table display-none">
		<ul id="file_list">
			<li class="thead">
				<span class="del">删除</span>
				<span class="size">大小</span>
				<span class="auto autocut">文件名</span>
			</li>
			<notempty name="file_list">
				<volist name="file_list" id="file">
					<li class="tbody" id="{$file.id}" add_file="{$file.id}" size="{$file.size}" filename="{$file.name}">
						<div class="loading"></div>
						<div class="data">
							<span class="del text-center"> <a class="link del">删除</a> </span>
							<span class="size" >{$file.size|reunit}</span>
							<span class="auto autocut" title="{$file.name}"> <a target="_blank" href="{:U('down?attach_id='.f_encode($file['id']))}">{$file.name}</a>
								<eq name="file.extension" value="mp4">
									(<a class="link down" target="_blank" onclick='winopen("{:U("file/player?attach_id=".f_encode($file["id"]))}",730,460)' >播放</a> )
								</eq> </span>
						</div>
					</li>
				</volist>
			</notempty>
		</ul>
	</div>
	<div class="well clearfix">
		<div class="imgchoose col-xs-9">
		编辑头像：
		<br />
		<img src="" id="target" style="max-width:440px;height:auto;"/>
	</div>
	<div class="col-xs-3" >
		<div class="text-center">
			<a onclick="save()"  class="btn btn-default">确定</a>
			<a onclick="myclose()"  class="btn btn-default">关闭</a>
		</div>
		<div class="text-center">
			<a id="pickfiles" href="javascript:;" class="btn btn-default">上传头像</a>
		</div>
		<div class="text-center display-none">
			当前头像：
			<br />
			<div><img class="current"  src="/{:C('SAVE_PATH')}{$pic}" />
			</div>
		</div>
		<div class="text-center">
			头像预览：
			<br />
			<div style="width:120px;height:120px;overflow:hidden;margin-left: auto;margin-right: auto;"><img class="preview" id="preview" src="" />
			</div>
		</div>
	</div>
	</div>
</div>
<script>
	$(function(){
		uploader_init();
		var uploader
		var save_path = "/{:C('SAVE_PATH')}";
		function uploader_init() {
			var settings = {
				runtimes : 'html5,flash',
				browse_button : 'pickfiles',
				container : 'uploader',
				max_file_size : '1mb',
				url : upload_url,
				flash_swf_url : '/Public/js/plupload/plupload.flash.swf',
				filters : [{
					title : "Image Files",
					extensions : "jpg,gif,png,tif,xps"
				}]
			};

			uploader = new plupload.Uploader(settings);
			uploader.init();
			if ($("#uploader .tbody").length > 0) {
				$("#uploader .tbody .loading").css("width", "100%");
				$("#uploader .thead").show();
				$("#uploader .tbody").each(function() {
					id = $(this).attr("filename");
					filename = $(this).attr("filename");
					size = $(this).attr("size");
					file = new plupload.File(id, filename, size);
					file.status = plupload.DONE;
					count = uploader.files.length;
					uploader.files[count] = file;
				})
			}
			uploader.bind('FilesAdded', function(up, files) {
				$("#uploader li.thead").show();
				for (var i in files) {
					html = '<li class="tbody" id="' + files[i].id + '">\n';
					html += '<div class="loading"></div>\n';
					html += '<div class="data">\n';
					html += '<span class="del text-center"><a class="link del">删除</a></span>\n';
					html += '<span class="size text-right">' + plupload.formatSize(files[i].size) + '</span>';
					html += '<span class="auto autocut">' + files[i].name + '</span>';
					html += '</li>';
					html += '</div>\n';
					$('#file_list').append(html);
				}				
				uploader.start();
			});

			uploader.bind('UploadProgress', function(up, file) {
				$("#" + file.id).find("a.del").hide();
				$("#" + file.id).find('.loading').css("width", file.percent + "%");
			});

			uploader.bind('FileUploaded', function(up, file, data) {
				//alert(data.response);
				var myObject = eval('(' + data.response + ')');
				$("#img").val(save_path + myObject.savename);
				$("#target").attr("src", save_path + myObject.savename);
				$(".preview").attr("src", save_path + myObject.savename);				
				$('#target').Jcrop({
					minSize : [60, 60],
					setSelect : [0, 0, 120,120],
					onChange : updatePreview,
					onSelect : updatePreview,
					onSelect : updateCoords,
					aspectRatio : 1
				}, function() {
					// Use the API to get the real image size
					var bounds = this.getBounds();
					boundx = bounds[0];
					boundy = bounds[1];
					// Store the API in the jcrop_api variable
					jcrop_api = this;
				});	
				$(".jcrop-holder img").attr("src",save_path + myObject.savename);
				$(".imgchoose").show(1000);
			});
		}

		//头像裁剪
		var jcrop_api, boundx, boundy;

		function updateCoords(c) {
			$('#x').val(c.x);
			$('#y').val(c.y);
			$('#w').val(c.w);
			$('#h').val(c.h);
		};

		function updatePreview(c) {
			if (parseInt(c.w) > 0) {
				var rx = 120 / c.w;
				var ry = 120 / c.h;
				$('#preview').css({
					width : Math.round(rx * boundx) + 'px',
					height : Math.round(ry * boundy) + 'px',
					marginLeft : '-' + Math.round(rx * c.x) + 'px',
					marginTop : '-' + Math.round(ry * c.y) + 'px'
				});
			}
		};
	})
		function checkCoords() {
			if (parseInt($('#w').val()))
				return true;
			alert('请选择图片上合适的区域');
			return false;
		};	
		function save(){
			var img = $("#img").val();
			var x = $("#x").val();
			var y = $("#y").val();
			var w = $("#w").val();
			var h = $("#h").val();
			var id = $("#id").val();
			if (checkCoords()) {
				$.ajax({
					type : "POST",
					url : "{:U('resize_img')}",
					data : {
						"img" : img,
						"x" : x,
						"y" : y,
						"w" : w,
						"h" : h,
						"id":id
					},
					dataType : "json",
					success : function(msg) {
						if( msg.result_code == 1 ){
							$("#emp_pic", parent.document).attr("src","/{:C('SAVE_PATH')}"+msg.result_des+'?t='+Math.random());
							$("#pic", parent.document).val(msg.result_des);
						}
						myclose();
					}
				});
			}
		}	
</script>